<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 响应式表格</title>
    <link rel="stylesheet" href="${path}/css/bootstrap.min.css">
    <script src="${path}/js/jquery.min.js"></script>
    <script src="${path}/js/bootstrap/bootstrap.min.js"></script>
    <style type="text/css">
        /*子代选择器*/
        .one>td{
           /* color: #bce8f1;*/
            color: #f527ff;
            font-size:17px;
            text-shadow:1px 1px 2px #bce8f1;

        }
      td{
          text-align: center;
          width: 5%;
      }
        a:link{
            color: #f527ff;
        }

        a:visited{
            color: #ccc;
        }

        a:hover{
            color: red;
        }

        a:active {
            color: palegreen;
        }
    </style>
</head>
<body>
<div>
<div class="table-responsive">
    <table class="table">
        <%--<caption style="text-align: center;color: #46b8da;font-size:30px;font-weight:bold;text-shadow: 2px 2px 2px #bce8f1" >后台订单管理</caption>--%>
        <thead>
        <tr><td><input  type="text"  style="width: 120px"   placeholder="根据订单号查询" name="orderNo" /><button type="button" class="btn btn-info"   onclick="checkSize()" style="background-color: #ff3c3d;height: 30px">Find</button></td></tr>
        <tr class="one">
            <%--一开始是不显示的--%>
            <td class="td1" align="center" height="30"  onclick="select()">全选</td>
            <td  name="t1">序号</td>
            <td>编号</td>
            <td>创建日期</td>
            <td>付款日期</td>
            <td>收件人</td>
            <td>手机号</td>
            <td>邮编</td>
            <td>收货地址</td>
            <td>总价</td>
            <td>交易状态</td>
            <td><a  class="a1">编辑</a></td>
        </tr>
        </thead>
        <tbody>
        <c:forEach  items="${pageBean.list}"  var="p" varStatus="v">
        <tr class="two">
            <td class="td2" align="center" height="30" style=""><input type="checkbox"  name="bx" value="${p.orderId}"></td>
            <td >${v.count}</td>
            <td >${p.orderNo}</td>
            <td><fmt:formatDate value="${p.createDate}" type="date" pattern="yyyy/MM/dd hh:mm:ss"/> </td>
            <td><fmt:formatDate value="${p.payDate}" type="date" pattern="yyyy/MM/dd hh:mm:ss"/> </td>
            <td>${p.reciver}</td>
            <td>${p.tel}</td>
            <td>${p.emailCode}</td>
            <td>${p.address}</td>
            <td>${p.total}</td>
            <td>${p.orderStatus}</td>
            <td  class="td3">
                <button type="button" class="btn btn-success butt1"   onclick="dele(this)">删除</button>
            </td>
        </tr>
        </c:forEach>
        <tr   class="tr1"><td  colspan="12"><button type="button"  class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" style="width: 100px;height: 40px;text-align: center;background-color: #ff1322" >删除</button></td></tr>
        </tbody>
    </table>
<%--删除模态框--%>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        请慎重选择
                    </h4>
                </div>
                <div class="modal-body">
                    一旦删除不可恢复
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary"  onclick="dll()">
                       确认删除
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</div>
    <%@  include file="../../common/pages3.jsp" %>

</div>
<script >
    /*页面加载结束*/
    $(function (){

        $(".td1").hide();
        $(".td2").hide();
        $(".tr1").hide();
        /*点击"编辑"的超链接触发事件*/
       $(".a1").click(function () {
          $(".td1").toggle();
          $(".td2").toggle();
           $(".td3").toggle();
           $(".tr1").toggle();
        })

    })

</script>

<script type="text/javascript">
    function dele(obj) {
        var tr=obj.parentNode.parentNode;
        var td=document.getElementsByTagName("tbody")[0];

        /*不知道为什么是5*/
        var orderId=obj.parentNode.parentNode.childNodes[1].childNodes[0].value;
        var  xmlhttp=new  XMLHttpRequest();
         xmlhttp.onreadystatechange=function () {
             if(xmlhttp.readyState==4 && xmlhttp.status==200){
                 var  result=xmlhttp.responseText;
                 if(result=="ok"){
                  td.removeChild(tr);
                 }
             }
         }
        xmlhttp.open("get","${path}/backstage/delete?orderId="+orderId,true);
        xmlhttp.send();
    }

    function checkSize() {
        var orderNo = document.getElementsByName("orderNo")[0].value;
        var pageSize=document.getElementsByName("pageSize")[0].value;

        window.location = "${path}/backstage/inquiry?pageSize="+pageSize+"&orderNo="+orderNo;
    }
    function checkp() {
        alert("=====");
        var v =${pageBean.pageCount};
        var orderNo = document.getElementsByName("orderNo")[0].value;
        var pageNow = document.getElementsByName("pageNow")[0].value;
        var pageSize = document.getElementsByName("pageSize")[0].value;

        var regx = /^[0-9]{1,}$/;
        if (regx.test(pageNow)) {
            if (pageNow > v) {
                alert("输入的值不在范围内")
            }
        } else {
            alert("输入无效");
        }
        window.location = "${path}/backstage/inquiry?pageNow=" + pageNow + "&pageSize=" + pageSize+"&ordeNo"+orderNo;
    }

    function  select() {
        var  box=document.getElementsByName("bx");
        for(var i=0;i<box.length;i++){
            box.checked;
            }

    }
      function  dll() {
            var  box=document.getElementsByName("bx");
            var  str="";
            for(var i=0;i<box.length;i++){
                if(box.checked){
                  str+=box[i].value;
                }
            }
       window.location="${path}/backstage/deleteorderId?orderId="+str;
 }

</script>


</body>
</html>